<script setup>
import { onMounted, ref } from 'vue'
import request from '@/utils/request'
import goods from '@/components/goods.vue'

const bannerList = ref([])
const getBanner = async () => {
    const res = await request.get('/banner')
    bannerList.value = res.data.data
}
const hotList=ref([])
const getHot= async()=>{
  const res =await request.get('/hot')
  console.log(res)
  hotList.value =res.data.data
}
onMounted(() => {
    getBanner()
    getHot()
})

</script>
<template>
    <div class="main">
        <!-- 轮播图 -->
        <el-carousel height="520px">
            <el-carousel-item v-for="item in bannerList" :key="item.id">
                <img class="bimg" :src="item.image" alt="">
            </el-carousel-item>
        </el-carousel>
        <div class="htitle">热门书籍</div>
        <div class="hot">
           <goods :goods="hotList"></goods>
        </div>
    </div>
</template>
<style scoped lang="scss">
.main {
    width: 1400px;
    margin: 0 auto;

    .bimg {
        width: 100%;
        height: 520px;
    }
    .hot{
        width: 100%;
        display: flex;
    }
    .htitle{
        text-align: center;
        color: aqua;
        margin-top: 28px;
        letter-spacing: 8px;
        font-size: 28px;
        width: 100%;
        height: 60px;
        border-bottom: 2px solid aqua;
    }
}
</style>